<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .Pms_primary_plain_btn_active {
        color: #053dc8 !important;
        border: 1px solid #053dc8 !important;
        z-index: 1;
    }

    .el-button--small {
        /* 主要朴素按钮字体大小 */
        font-size: 14px;
        padding: 8px 15px;
    }

    .el-button.is-plain:focus,
    .el-button.is-plain:hover {
        background: #FFF;
        border-color: #053dc8;
        color: #053dc8;
    }

    /* elementui表格优化 */
    .el-table__row .el-table__cell,
    .el-table__row .el-table__cell .cell {
        padding: 0 !important;
    }

    #roomType .hover-row td {
        transition: 0s !important;
        background: transparent;
    }

    .highline-cell {
        border: 1px solid #053dc8 !important;
        background-color: white !important;
        z-index: 999 !important;
        cursor: pointer;
    }

    #xAxis {
        position: absolute;
        width: 0;
        background-color: rgba(103, 133, 209, 0.1);
        z-index: 990;
        pointer-events: none;
    }

    #yAxis {
        position: absolute;
        height: 0;
        background-color: rgba(103, 133, 209, 0.1);
        z-index: 999;
        pointer-events: none;
    }

    .week-price-data {
        display: none;
    }



    .week-gutes-data,
    .week-solar-data {
        color: black;
        margin: 2px;
        position: absolute;
        width: 0;
        z-index: 999;
        top: 0;
        left: 0;
        padding: 2px 2.5px 2px 2px;
    }

    .week-gutes-data>div,
    .week-solar-data>div {
        padding: 5px;
    }

    /* 预订框样式 */
    .BookRoom,
    .BookRoom-2 {
        width: 100%;
        height: 48px;
        z-index: 999;
        position: absolute;
        padding: 3px;
        top: 0;
        left: 0;
        cursor: pointer;
    }

    .BookRoom-2 .BookRoom-content i {
        font-size: 34px;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .BookRoom .BookRoom-content,
    .BookRoom-2 .BookRoom-content {
        width: 100%;
        height: 100%;
        background-color: rgb(179, 200, 255);
        cursor: pointer;
    }

    .BookRoom .BookRoom-content i {
        display: none;
    }

    .BookRoom .BookRoom-content {
        background-color: rgb(220, 225, 238) !important;
    }

    /* 优化elementui表格 */
    #roomType {
        user-select: none;
        border-collapse: collapse;
    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border: 1px solid #EBEEF5;
    }

    .el-table__header-wrapper th {
        z-index: 991;
    }

    .el-table__fixed-header-wrapper {
        z-index: 999;
    }

    .el-table__fixed {
        z-index: 1000;
    }

    .el-input__inner {
        cursor: pointer;
    }

    .el-table_1_column_1 {
        padding: 5px 0 !important;
    }

    /* 滚动条样式 */

    .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: #f2f3f6;
    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .5);
        border-radius: 10px;
        -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, 0);
        transition: all 0.3s;

    }

    .el-table__body-wrapper:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .5);
        border-radius: 10px;
        -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, .1);
        transition: all 0.3s;

    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .5);
        -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, 0);
        transition: all 0.3s;

    }

    .el-table__body-wrapper::-webkit-scrollbar-track {
        border-radius: 10px;
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.3s;

    }

    .el-table__body-wrapper::-webkit-scrollbar-track:hover {
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, .5);
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.3s;
    }

    /* 处理表格X轴有缝隙的情况 */
    .el-table .el-table__fixed {
        height: auto !important;
        bottom: 8px;
    }

    /* // 当没有滚动条的时候 */
    .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right {
        right: 0 !important;
        bottom: 0px;
    }

    .el-table__fixed-body-wrapper {
        height: auto !important;
        bottom: 0px;
    }

    /* popover优化 */
    .webui-popover-content {
        padding: 0 !important;
    }

    .order-popover-content:hover {
        background-color: #f5f7fd;
    }
</style>

<body class="bgc-f2">
    <div id="app" class="main-container h-full" v-cloak>
        <!-- 顶部导航栏 -->
        <div class="grad-table" id="selectContainer" style="height:100%;">
            <div class="pl-17 pr-16 pt-17 pb-16">
                <el-button-group class="m">
                    <el-button size="small" plain class="Pms_primary_plain_btn_active">日历</el-button>
                    <el-button size="small" plain>单日</el-button>
                    <el-button size="small" plain>渠道</el-button>
                </el-button-group>
            </div>

            <div class="pl-17 pb-6 ovh" style="height:calc(100% - 65px)" id="container">
                <div id="xAxis"></div>
                <div id="yAxis"></div>
                <el-table :data="tableData" border style="width: 100%" height="100%" ref="elTable"
                    :header-cell-style="headerCellStyle" :row-style="{height: '52px'}" :span-method="objectSpanMethod"
                    @cell-mouse-enter="cellMouseEnterMethod" @cell-mouse-leave="cellMouseLeaveMethod" id="roomType"
                    :cell-class-name="cellClassNameMethod">
                    <!-- 左边日期、筛选、收起列 -->
                    <el-table-column fixed width="186" header-align="center">
                        <!-- 选择日期 -->
                        <template slot="header" slot-scope="scope">
                            <div class="cup">
                                <div class="ub ub-ac ub-pc">
                                    <div class="tx-33">
                                        <span style="margin-left: 23px;">{{dateVal}}</span>
                                        <div
                                            style="overflow: hidden;position: absolute;top: 4px;left: 22px;width: 94px;z-index: 999;opacity: 0;">
                                            <el-date-picker v-model="dateVal" type="date" placeholder="选择日期"
                                                value-format="yyyy-MM-dd" ref="dateTool" class="cup"
                                                @change="dateChange(1)">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                    <div>
                                        <i data-v-31dd3b0c="" class="text-primary el-icon-date ml-8"></i>
                                    </div>
                                    <div class="tx-wh bgc-bl uw-16 uh-16 le-16 tx-12 ml-5" @click='dateChange(2)'>今
                                    </div>
                                </div>
                                <div class="ub ub-ac ub-pc cup">
                                    <div class="el-icon-arrow-left" @click='dateChange(3)'></div>
                                    <div class="ml-5 mr-5 mt-2">
                                        {{seDateTran(dateVal)}}
                                    </div>
                                    <div class="el-icon-arrow-right" @click='dateChange(4)'></div>

                                </div>
                            </div>
                        </template>
                        <!-- 筛选工具 -->
                        <el-table-column prop="roomTypeName" width="98" header-align="center" align="center">
                            <template slot="header" slot-scope="scope">
                                <div class="tx-33">筛选<i class="el-icon-s-operation ml-5"></i></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="roomName" width="88" header-align="center" align="center">
                            <template slot="header" slot-scope="scope">
                                <div class="tx-33">收起<i class="el-icon-arrow-up ml-5"></i></div>
                            </template>
                        </el-table-column>

                    </el-table-column>
                    <!-- 每日日期和剩余间数 -->
                    <el-table-column v-for="(item,index) in timeThArr" :key="index" width="97" header-align="center">
                        <!-- 每日日期 -->
                        <template slot="header" slot-scope="scope">
                            <div>
                                <span v-if="WebUtil.judgeTime(timeThArr[index].date)" class="tx-bl">
                                    今天
                                    <span class="ml-3">{{WebUtil.getWeek(timeThArr[index].date)}}</span>
                                </span>
                                <span v-else>
                                    <span
                                        v-if="WebUtil.getWeek(timeThArr[index].date) == '五' || WebUtil.getWeek(timeThArr[index].date) == '六'"
                                        class="tx-re">
                                        {{timeThArr[index].date.substring(5,timeThArr[index].length)}}
                                        <span class="ml-3">{{WebUtil.getWeek(timeThArr[index].date)}}</span>
                                    </span>
                                    <span v-else>
                                        <span
                                            class="tx-33">{{timeThArr[index].date.substring(5,timeThArr[index].date.length)}}</span>
                                        <span class="ml-3 tx-99">{{WebUtil.getWeek(timeThArr[index].date)}}</span>
                                    </span>
                                </span>
                            </div>
                        </template>
                        <!-- 剩余间数 -->
                        <el-table-column width="97" header-align="center">
                            <template slot="header" slot-scope="scope">
                                <span class="tx-12 tx-99">
                                    剩余{{item.surplus || 0}}间
                                </span>
                            </template>
                            <template slot-scope="scope">
                                <div style="height:52px;">
                                    <div class="tx-l tx-99 tx-12 pt-5 pl-5 pr-5 pb-5 cup book-td" style="height: 52px;">
                                        <div class="week-price-data  book-td">
                                            <p class="le-14  book-td">{{scope.row[item.date].price.roomTypeName}}</p>
                                            <p class="le-14  book-td">{{scope.row[item.date].price.roomName}}</p>
                                            <p class="ub ub-ac le-14  book-td"><span style="margin-left: -3px;"
                                                    class="book-td" v-if="scope.row[item.date].price.roomPrice">￥</span>
                                                <span style="margin-left: -3px;"
                                                    class="book-td">{{scope.row[item.date].price.roomPrice}}</span>
                                            </p>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </el-table-column>

                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <script src="https://lib.baomitu.com/underscore.js/1.11.0/underscore-min.js"></script>
    <script type="text/babel">
        new Vue({
            el: '#app',
            data: {
                //录入订单框tabs选项
                orderActiveName: "1",
                value: true,
                xAxisTop: 0,
                yAxisLeft: 0,
                dateVal: WebUtil.initTimeStr(new Date(new Date().setDate(new Date().getDate() - 2)).getTime(), "day"),//默认日期
                timeThArr: [],
                tableData: [],
                roomEnum: [
                    {
                        roomTypeName: "雅致双床房",
                        roomTypeId: 1,
                        roomList: [
                            { roomId: 1, roomName: "248" },
                            { roomId: 2, roomName: "249" },
                            { roomId: 3, roomName: "250" },
                            { roomId: 4, roomName: "251" },
                            { roomId: 5, roomName: "252" },
                            { roomId: 6, roomName: "253" },
                            { roomId: 7, roomName: "254" },
                        ]
                    },
                    {
                        roomTypeName: "普通大床房",
                        roomTypeId: 2,
                        roomList: [
                            { roomId: 10, roomName: "238" },
                            { roomId: 11, roomName: "239" },
                            { roomId: 12, roomName: "230" },
                            { roomId: 13, roomName: "231" },
                            { roomId: 14, roomName: "232" },
                            { roomId: 15, roomName: "233" },
                            { roomId: 16, roomName: "234" },
                        ]
                    }
                ],
                orderList: [
                    {
                        otaType: "美团酒店",
                        guestNmae: "张三",
                        roomId: 1,
                        roomName: "248",
                        phone: "13800138000",
                        night: "15",
                        priceTotal: "168.00",
                        collection: "10.00",    //已收款
                        orderNum: "98665008922331795456",
                        inDate: "2022-06-15",
                        outDate: "2022-06-25",
                        typeName: '已预订',
                        type: 1,
                        remarks: "备注",
                        payStatus: "1",
                        id: 1,
                    },
                    {
                        otaType: "美团酒店",
                        guestNmae: "张三",
                        roomId: 2,
                        roomName: "249",
                        phone: "13800138000",
                        night: "15",
                        priceTotal: "168.00",
                        collection: "10.00",    //已收款
                        orderNum: "98665008922331795456",
                        inDate: "2022-06-15",
                        outDate: "2022-06-25",
                        typeName: '已入住',
                        type: 2,
                        remarks: "备注",
                        payStatus: "1",
                        id: 1,
                    },
                ],
                solars: [
                    {
                        roomId: 1,
                        status: 1,
                        date: "2022-06-25",
                        remarks: "锁房测试"
                    }
                ],
                roomPriceList: []
            },
            methods: {
                // 鼠标放上单元格时显示交叉线
                cellMouseEnterMethod(row, column, cell) {
                    let idx = Number($(cell).parent().children("td").eq(0).attr("rowspan")) > 1 ? $(cell).index() - 1 : $(cell).index()
                    // 获取表格的滚动偏移量
                    let table = this.$refs.elTable.bodyWrapper;
                    let scrollTop = table.scrollTop;
                    let scrollLeft = table.scrollLeft;
                    // 清除高亮单元格
                    let highlineCell = document.getElementsByClassName('highline-cell')[0];
                    if (highlineCell) {
                        highlineCell.classList.remove("highline-cell");
                    }
                    // 添加单元格高亮
                    cell.classList.add("highline-cell");
                    // 显示房态数据
                    $(cell).find(".week-price-data").show();
                    if (idx == 0 || idx == -1) { return; }
                    // 获取X/Y轴
                    let xAxis = document.getElementById("xAxis");
                    let yAxis = document.getElementById("yAxis");

                    let xRect = xAxis.getBoundingClientRect();
                    let yRect = yAxis.getBoundingClientRect();
                    let cellRect = cell.getBoundingClientRect();
                    // 设置X轴高度，Y轴宽度
                    xAxis.style.height = cellRect.height + 'px';
                    xAxis.style.width = $("#roomType").width() - $(".el-table__fixed").outerWidth() - "14" + 'px';
                    yAxis.style.width = cellRect.width + 'px';
                    yAxis.style.height = $("#roomType").height() - "7" + 'px';
                    $(xAxis).css("border", "1px solid rgb(213, 217, 227)")
                    $(yAxis).css("border", "1px solid rgb(213, 217, 227)")
                    // 设置X/Y轴位置
                    xAxis.style.top = (cellRect.top - xRect.top) + 'px';
                    xAxis.style.left = ($(".el-table__fixed").outerWidth() + 17) + 'px';
                    yAxis.style.left = (cellRect.left) + 'px';
                    // 记录XY轴位置，用于设置XY轴随滚动条移动
                    this.xAxisTop = cellRect.top - xRect.top + scrollTop;
                    this.yAxisLeft = cellRect.left - yRect.left + scrollLeft;
                },
                //设置表格格式
                setTableConfig() {
                    let timeThArr = WebUtil.getMonthList(this.dateVal);
                    // 初始化数据列表默认为空；
                    this.tableData = [];

                    // 插入日期数据
                    this.timeThArr = [];
                    this.roomPriceList = [];
                    for (let k = 0; k < timeThArr.length; k++) {
                        const time = timeThArr[k];
                        this.timeThArr.push({ date: time })
                        this.roomPriceList.push({
                            date: time,
                            surplus: "22",
                            roomTypeId: "1",
                            roomPrice: "100.25",
                            roomId: "1",
                            roomName: "247",
                        })
                    }
                    //循环插入每行数据
                    for (let i = 0; i < this.roomEnum.length; i++) {
                        const element = this.roomEnum[i];
                        //如果没有房价数据，则只插入房价
                        if (element.roomList.length == 0) {
                            this.tableData.push({
                                roomTypeName: element.roomTypeName,
                                roomTypeId: element.roomTypeId,
                                rowSpan: 1,
                            })
                        }
                        // 循环房间列表插入房间数据和房价数据
                        for (let j = 0; j < element.roomList.length; j++) {
                            const room = element.roomList[j];
                            //当前行对象
                            let dataObj = {}
                            dataObj.roomTypeName = element.roomTypeName;
                            dataObj.roomTypeId = element.roomTypeId;
                            dataObj.roomName = room.roomName;
                            dataObj.roomId = room.roomId;
                            // 判断合并房间类型数据行
                            if ((!this.roomEnum[i - 1] || element.roomTypeId != this.roomEnum[i - 1].roomTypeId) && j == 0) {
                                dataObj.rowSpan = element.roomList.length
                            } else {
                                dataObj.rowSpan = 0
                            }
                            // 当前房间的每日房价
                            let priceList = this.roomPriceList.filter(item => item.roomId == room.roomId);
                            // 循环前端生成的每日日期，将日期相同的房价数据和剩余房间数量插入到当前行
                            for (let k = 0; k < this.timeThArr.length; k++) {
                                const time = this.timeThArr[k];
                                // 日期字段默认为空
                                dataObj[time.date] = {};
                                //判断相同日期的房价数据
                                let price = priceList.filter(item => item.date == time.date);
                                //如果存在当前循环的日期，则将房态数据插入到当前行，如果当天没有房价数据，则默认为空
                                if (price.length) {
                                    // 插入房态名称
                                    price[0].roomTypeName = dataObj.roomTypeName;
                                    // 插入房态数量
                                    dataObj[time.date].price = price[0];
                                    // 插入剩余间数
                                    time.surplus = price[0].surplus
                                } else {
                                    dataObj[time.date].price = {}
                                }

                                // 循环插入宾客信息
                                // let guest = this.orderList.filter(item => item.inDate == time.date && item.roomId == dataObj.roomId);
                                // if (guest.length > 0) {
                                //     dataObj[time.date].guest = guest[0]
                                // } else {
                                //     dataObj[time.date].guest = {};
                                // }
                            }
                            this.tableData.push(dataObj)
                        }
                    }
                    // 插入订单信息
                    this.setOrderToDom();
                    // 插入停用房
                    this.BoxSolars();
                },
                //更改表格表头行高
                headerCellStyle(scope) {
                    let style = {
                        backgroundColor: "#fff"
                    }
                    if (scope.rowIndex == 1) {
                        style.padding = "4.5px 0px";
                    }
                    return style
                },
                // 鼠标移出单元格事件
                cellMouseLeaveMethod(row, column, cell, event) {
                    this.dom = this.$refs.elTable.bodyWrapper
                    // 滚动屏幕时移除交叉线
                    this.dom.addEventListener('scroll', () => {
                        // 移除XY轴
                        this.removeOverlapping(cell);
                    })
                    this.removeOverlapping(cell);
                },
                // 移除交叉线和隐藏房态数据
                removeOverlapping(cell) {
                    let xAxis = document.getElementById("xAxis");
                    let yAxis = document.getElementById("yAxis");

                    // 重置X/Y轴位置
                    xAxis.style.top = 0;
                    yAxis.style.left = 0;
                    xAxis.style.height = 0;
                    yAxis.style.width = 0;
                    $(xAxis).css("border", "none")
                    $(yAxis).css("border", "none")
                    $(".highline-cell").removeClass("highline-cell")
                    $(cell).find(".week-price-data").hide();
                },
                //合并表格列
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex === 0) {
                        return {
                            rowspan: row.rowSpan,
                            colspan: 1
                        };
                    }
                },
                // 自定义单元格class
                cellClassNameMethod({ row, column, rowIndex, columnIndex }) {
                    let className = "";
                    if (this.timeThArr[columnIndex - 2]) { className += "date-" + this.timeThArr[columnIndex - 2].date }
                    className += " roomId-" + row.roomId;
                    if (columnIndex != 0 && columnIndex != 1) { className += " comu-td"; }
                    className += " rowIndex-" + rowIndex;
                    return className;
                },
                // 设置订单信息到表格里
                setOrderToDom() {
                    // 首先移除所有订单信息
                    $(".week-gutes-data").remove()
                    setTimeout(() => {
                        for (let i = 0; i < this.orderList.length; i++) {
                            let bgcColor = "";
                            if (this.orderList[i].type == 1) {
                                bgcColor = "rgba(255, 212, 179) !important"
                            } else if (this.orderList[i].type == 2) {
                                bgcColor = "rgba(179, 222, 255) !important"
                            } else {
                                bgcColor = "rgb(33, 83, 206) !important"
                            }
                            // 订单信息
                            let html = `
                                        <div  class=" order-id-${this.orderList[i].id} order-Index-${i} cup tx-12 week-gutes-data indate-${this.orderList[i].inDate} outDate-${this.orderList[i].outDate} roomId-${this.orderList[i].roomId} order-info">
                                            <div style="background-color: ${bgcColor};height:100%" class='order-info'>
                                                <div class="ub ub-ac ub-sb order-info" >
                                                    <p class="le-14 order-info ut-s">${this.orderList[i].guestNmae}</p>
                                                    <div style="width: 21px;height: 21px;line-height: 21px;transform: scale(0.7);display:${this.orderList[i].payStatus ? 'block' : 'none'}" class="tx-c bgc-re tx-wh order-info" >
                                                        欠
                                                    </div>
                                                </div>
                                                <p class="le-14 mt-3 order-info ut-s">●${this.orderList[i].otaType}</p>
                                            </div>
                                        </div>
                                    `
                            // 将订单信息插入到表格里
                            $(".el-table__body-wrapper").append(html);
                            // 获取订单信息dom
                            let orderDom = $(".week-gutes-data.indate-" + this.orderList[i].inDate + ".roomId-" + this.orderList[i].roomId);
                            // 获取日期列表
                            let dates = WebUtil.getDatesBetweenDates(this.orderList[i].inDate, this.orderList[i].outDate);
                            // 移除订单占用的tdclass
                            for (let j = 0; j < dates.length; j++) {
                                if (dates[j] != this.orderList[i].outDate) {
                                    $(".el-table__body-wrapper .date-" + dates[j] + ".roomId-" + this.orderList[i].roomId).removeClass("comu-td")
                                }
                            }

                            // 定位订单信息，并添加到td里
                            let left = 0;
                            let top = 0;
                            let width = 0;
                            let height = 0;
                            for (let j = 0; j < this.timeThArr.length; j++) {
                                const element = this.timeThArr[j];
                                if (element.date >= this.orderList[i].inDate && element.date < this.orderList[i].outDate) {
                                    if (!left) { left = $(".el-table__body-wrapper .date-" + element.date + ".roomId-" + this.orderList[i].roomId).offset().left }
                                    width += $(".el-table__body-wrapper .date-" + element.date + ".roomId-" + this.orderList[i].roomId).width() + 2;
                                    top = $(".el-table__body-wrapper .date-" + element.date + ".roomId-" + this.orderList[i].roomId).offset().top
                                    height = $(".el-table__body-wrapper .date-" + element.date + ".roomId-" + this.orderList[i].roomId).height()
                                }
                            }
                            // 设置dom位置和宽度高度
                            orderDom.css("left", left - orderDom.offset().left);
                            orderDom.css('width', width);
                            orderDom.css("top", top - orderDom.offset().top);
                            orderDom.css('height', height + 2);
                        }
                        // 订单信息插入表格完毕后开启订单信息的popover
                        this.initOrderPopover();
                    }, 200);
                },
                // 停用房方法
                BoxSolars() {
                    $(".week-solar-data").remove()
                    setTimeout(() => {
                        for (let i = 0; i < this.solars.length; i++) {
                            let bgcColor = "rgba(204, 204, 204) !important";
                            let icon = "el-icon-remove";
                            let solarText = "";
                            if (this.solars[i].status == 1) {
                                bgcColor = "rgba(204, 204, 204) !important";
                                solarText = "停用";
                            }
                            // 订单信息
                            let html = `
                                        <div  class="solar-id-${this.solars[i].id} order-Index-${i} cup tx-12 week-solar-data indate-${this.solars[i].date} roomId-${this.solars[i].roomId} order-info">
                                            <div style="background-color: ${bgcColor};height:100%" class='order-info'>
                                                <div class="ub ub-ac ub-pc order-info" >
                                                    <p class="le-14 order-info mt-3"><i class='${icon} tx-16'></i></p>
                                                </div>
                                                <p class="le-14 mt-3 order-info tx-c tx-33 ut-s">${solarText}</p>
                                            </div>
                                        </div>
                                    `
                            // 将订单信息插入到表格里
                            $(".el-table__body-wrapper").append(html);
                            // 获取订单信息dom
                            let solarDom = $(".week-solar-data.indate-" + this.solars[i].date + ".roomId-" + this.solars[i].roomId);
                            // 表格单元格
                            let tableTd = $(".el-table__body-wrapper .date-" + this.solars[i].date + ".roomId-" + this.solars[i].roomId);
                            if (tableTd.length > 0) {
                                // 移除订单占用的tdclass
                                tableTd.removeClass("comu-td")

                                // 定位订单信息，并添加到td里
                                let left = 0;
                                let top = 0;
                                let width = 0;
                                let height = 0;

                                left = tableTd.offset().left
                                width += tableTd.width() + 2;
                                top = tableTd.offset().top
                                height = tableTd.height()
                                // 设置dom位置和宽度高度
                                solarDom.css("left", left - solarDom.offset().left);
                                solarDom.css('width', width);
                                solarDom.css("top", top - solarDom.offset().top);
                                solarDom.css('height', height + 2);
                            }
                        }
                    }, 200);
                },
                // 移除预订框
                removeBookRoomDom(i, date) {

                    $(".BookRoom.date-" + date + ".roomId-" + this.tableData[i].roomId).remove();
                    $(".BookRoom-2.date-" + date + ".roomId-" + this.tableData[i].roomId).remove();
                    $(".comu-td.date-" + date + ".roomId-" + this.tableData[i].roomId).removeClass("selected")
                    // 计算离鼠标最近的预订框，并将popper选项位置依附在预订框上
                },
                //添加预订框
                handleClickTimeData(i, date) {
                    // 获取订单信息dom
                    let BookRoomDom = $(".BookRoom.date-" + date + ".roomId-" + this.tableData[i].roomId);
                    let tdDom = $(".el-table__body-wrapper  .date-" + date + ".roomId-" + this.tableData[i].roomId);
                    // 预订box
                    let html = `<div class="BookRoom rowIndex-${i} date-${date} roomId-${this.tableData[i].roomId}"><div class="BookRoom-content cup tx-12 "><i class="el-icon-check"></i></div></div>`
                    // 将订单信息插入到表格里
                    $(".el-table__body-wrapper").append(html);
                    // 获取预订dom
                    BookRoomDom = $(".BookRoom.date-" + date + ".roomId-" + this.tableData[i].roomId);
                    // 设置dom位置和宽度高度
                    BookRoomDom.css("left", tdDom.offset().left - BookRoomDom.offset().left);
                    BookRoomDom.css("top", tdDom.offset().top - BookRoomDom.offset().top);
                    BookRoomDom.css('width', tdDom.width() + 2);
                    BookRoomDom.css('height', tdDom.height() + 2);
                },
                // 框选操作
                BoxSelection() {
                    let that = this;
                    setTimeout(() => {
                        WebUtil.Selection({
                            el: $(".comu-td:not(.is-hidden)"),  //包含集合
                            appointClass: ".book-td,.comu-td",    //在appointClass上也能滑动
                            inClass: '.BookRoom-2',    //鼠标进入到该元素
                            in: (dom, e) => {   //鼠标进入到该元素
                                if ($(dom).hasClass("BookRoom-2")) {
                                    let rowIdx = that.getDomClassVal($(dom), "rowIndex-");
                                    let date = that.getDomClassVal($(dom), "date-");
                                    this.removeBookRoomDom(rowIdx, date)
                                }
                            },
                            move: (doms, t) => {    //鼠标移动时
                                $("#xAxis").hide();
                                $("#yAxis").hide();
                                $("#my-popper").remove()
                                let rowIdx = that.getDomClassVal($(doms), "rowIndex-");
                                let date = that.getDomClassVal($(doms), "date-");
                                if (t == 1) {
                                    this.handleClickTimeData(rowIdx, date)
                                }
                                if (t == 2) {
                                    this.removeBookRoomDom(rowIdx, date);
                                }
                                // 框选操作移动鼠标时销毁订单信息的Popover
                                $('.week-gutes-data').webuiPopover('destroy');
                            },
                            up: (e) => {    //鼠标弹起时
                                $(".BookRoom").off();
                                $("#xAxis").show();
                                $("#yAxis").show();
                                $(".BookRoom").removeClass("BookRoom").addClass("BookRoom-2")
                                // 计算离鼠标最近的预订框，并将popper选项位置依附在预订框上
                                this.myPopper($(".BookRoom-2").last(), ['预订', '关房', '取消'], $(".el-table__body-wrapper"))
                            }
                        })
                        $(document).on("click", ".BookRoom-2", function (e) {
                            let rowIdx = that.getDomClassVal(this, "rowIndex-");
                            let date = that.getDomClassVal(this, "date-");
                            that.removeBookRoomDom(rowIdx, date)
                            // 在最后一个订单显示预订框选项
                            if ($(".BookRoom-2").length) {
                                that.myPopper($(".BookRoom-2").last(), ['预订', '关房', '取消'], $(".el-table__body-wrapper"))
                            } else {
                                $("#my-popper").remove()
                            }
                        })
                    }, 200);
                },
                //鼠标放在订单显示订单消息框
                initOrderPopover() {
                    let that = this;
                    if ($(".week-gutes-data").length) {
                        $(".week-gutes-data").webuiPopover({
                            content: function () {
                                let rowIdx = that.getDomClassVal($(this), "order-Index-");
                                let order = that.orderList[rowIdx];
                                let html = `<div class='cup'>`;
                                let tagBgcColor = "#66bdff";
                                let tagBgcText = "已入住";
                                let title = "";
                                if (order.type == 1) {
                                    tagBgcColor = "#ffa866 !important"
                                    tagBgcText = "已预订"
                                } else if (order.type == 2) {
                                    tagBgcColor = "#66bdff"
                                    tagBgcText = "已入住"
                                } else {
                                    tagBgcColor = "rgb(33, 83, 206) !important"
                                }
                                title += `<div class='ub ub-ac ub-sb w-full' style="background: #f2f3f6;">
                                                <div style="font-size: 14px;padding: 12px 16px;">${order.roomName}</div>
                                                <div style="font-size: 12px;padding: 5px 9px;background: ${tagBgcColor};margin-bottom: 1px;margin-right: 14px;color: white;">${tagBgcText}</div>
                                              </div>
                                        `;
                                html += title;
                                let content = `<div style='padding:12px 16px' class='order-popover-content order-id-${order.id} order-Index-${rowIdx} indate-${order.inDate} outDate-${order.outDate} roomId-${order.roomId}'>
                                                <div class="ub ub-ac tx-33 tx-14"  style='line-height: 28px;padding: 1px 0px'>
                                                    <div class="el-icon-user tx-16 mr-16"></div>
                                                    <div style='width:80px' class='mr-8'>${order.guestNmae}</div>
                                                    <div>13800138000</div>
                                                </div>
                                                <div class="ub ub-ac  tx-33 tx-14"  style='line-height: 28px;padding: 1px 0px'>
                                                    <div class="el-icon-date tx-16  mr-16"></div>
                                                    <div>${order.inDate.substring(5, order.inDate.length)}入住</div>
                                                    <div class=" el-divider el-divider--vertical"></div>
                                                    <div>${order.outDate.substring(5, order.outDate.length)}离店</div>
                                                    <div class=" el-divider el-divider--vertical"></div>
                                                    <div>共${order.night}晚</div>
                                                </div>
                                                <div class="ub ub-ac tx-33 tx-14 bor-b"  style='line-height: 28px;padding: 1px 0px'>
                                                    <div class="el-icon-connection  tx-16  mr-16"></div>
                                                    <div class='tx-bl'>${order.otaType}</div>
                                                </div>
                                                <div class="ub ub-ac ub-sb tx-33 tx-14 bor-b"  style='line-height: 28px;padding: 6px 0px'>
                                                    <div>订单总额：￥${order.priceTotal}</div>
                                                    <div>已收款：￥${order.collection}</div>
                                                </div>
                                                <div class="ub ub-ac ub-sb tx-33 tx-14 pt-6"  style='line-height: 28px;'>
                                                    <div>备注：${order.remarks}</div>
                                                </div>
                                            </div>`;
                                html += content;
                                html += `</div>`;
                                return html
                            }, //内容
                            animation: 'pop',   //动画
                            trigger: "hover",   //触发方式
                            arrow: false,   //是否显示箭头
                            placement: "right", //弹出的位置
                            width: '314px',
                            direction: "rtl"
                        });
                    }
                },
                // 移除框选遗留的元素dom
                removeSeletedBox() {
                    $("#my-popper").remove();
                    $(".BookRoom-2").remove();
                    $(".selected").removeClass("selected");
                    // 移除选中时重新初始化订单信息的Popover
                    this.initOrderPopover();
                },
                // 弹框预订选项
                myPopper(dom, option, apptoDom, type) {
                    let date = this.getDomClassVal($(dom), "date-");
                    let inDate = this.getDomClassVal($(dom), "indate-");
                    let roomId = this.getDomClassVal($(dom), "roomId-");
                    let orderIndex = this.getDomClassVal($(dom), "order-Index-");
                    let solarId = this.getDomClassVal($(dom), "solarId-");
                    let rowIndex = this.getDomClassVal($(dom), "rowIndex-");
                    let optionHtml = "";
                    for (let i = 0; i < option.length; i++) {
                        const element = option[i];
                        optionHtml += `<div class="el-popover__select indate-${inDate} roomId-${roomId} orderIndex-${orderIndex} solarId-${solarId} rowIndex-${rowIndex} date-${date} " id="my-popper-${i}"' >${element}</div>`
                    }

                    let left = $(dom).offset().left + $(dom).width()
                    let top = $(dom).offset().top + ($(dom).height() / 2)
                    let mypopper = `
                                        <div class="el-popover el-popper my-popper" id='my-popper'
                                        style=" transform-origin: left center;"
                                        x-placement="right">
                                        <div>
                                            ${optionHtml}
                                        </div>
                                        <div x-arrow="" class="popper__arrow" style="top: 8px;"></div>
                                    </div>
                                    `
                    $("#my-popper").remove();
                    $(apptoDom || "body").append(mypopper);
                    $(".my-popper").css("top", top - $("#my-popper").offset().top)
                    $(".my-popper").css("left", left - $("#my-popper").offset().left + 8)
                },
                // 一些dom的点击事件
                docToggle() {
                    var that = this;
                    // 弹框预订选项-取消按钮
                    $(document).on("click", "#my-popper-2", function () {
                        // 移除框选遗留的元素dom
                        that.removeSeletedBox();
                    })
                    // 弹框预订选项-预订按钮
                    $(document).on("click", "#my-popper-0", function () {
                        if ($(this).text() == "预订") {
                            // 日期数组
                            let dateRooms = [];
                            // 循环获取选中dom元素，获取选中房间和日期，将房间分组，判断每个房间是否连续的入住，如果是连续的入住，则装到同一个对象里面；
                            for (let i = 0; i < $(".BookRoom-2").length; i++) {
                                const element = $(".BookRoom-2")[i];
                                if (element) {
                                    let date = that.getDomClassVal(element, "date-");
                                    let dueTime = new Date(date).getTime();
                                    let roomId = that.getDomClassVal(element, "roomId-");
                                    dateRooms.push({ date, roomId, dueTime })
                                }
                            }
                            // 将日期升序
                            dateRooms = dateRooms.sort(function (a, b) {
                                return a.dueTime - b.dueTime;
                            });
                            dateRooms = WebUtil.arrGrouping(dateRooms, "roomId")
                            //将同一个房间连续日期的数据装到一个数组里
                            dateRooms = function () {
                                let orderList = [];
                                for (const key in dateRooms) {
                                    let o = {};
                                    for (let i = 0; i < dateRooms[key].length; i++) {
                                        const element = dateRooms[key][i];

                                        // 前一天的日期
                                        let lastDate = WebUtil.initTimeStr(new Date(new Date(element.date).setDate(new Date(element.date).getDate() - 1)), "day");

                                        if (i != 0 && new Date(lastDate).setHours(0, 0, 0, 0) == new Date(dateRooms[key][i - 1].date).setHours(0, 0, 0, 0)) {
                                            o.night += 1;
                                        } else {
                                            if (i > 0 && new Date(lastDate).setHours(0, 0, 0, 0) != new Date(dateRooms[key][i - 1].date).setHours(0, 0, 0, 0)) {
                                                orderList.push(o);
                                            }
                                            o = element;
                                            o.night = 1;
                                        }
                                        if ((dateRooms[key].length - 1 == i)) {
                                            orderList.push(o);
                                        }
                                    }
                                }
                                return orderList
                            }()
                            console.log(dateRooms);
                        }
                        that.openDetailsWin({
                            params: {},
                            iframeUrl: "/web/view/booking_box_input.html"
                        })
                    })
                    // 停用房点击事件
                    $(document).on("click", ".week-solar-data", function () {
                        // 移除框选遗留的元素dom
                        that.removeSeletedBox();
                        $('.week-gutes-data').webuiPopover('destroy');
                        that.myPopper(this, ['转预订', '开房', '取消'], $(".el-table__body-wrapper"))
                    })

                    // 预订/补录点击事件
                    $(document).on("click", ".week-gutes-data", function () {
                        // 移除框选遗留的元素dom
                        that.removeSeletedBox();
                        that.openDetailsWin({
                            id: "booking_box_details",
                            params: {},
                            iframeUrl: "/web/view/booking_box_details.html"
                        })
                    })

                    // 点击popver弹框里的订单信息
                    $(document).on("click", ".order-popover-content", function () {
                        let inDate = that.getDomClassVal($(this), "indate-");
                        let roomId = that.getDomClassVal($(this), "roomId-");
                        let orderDom = $(".week-gutes-data.indate-" + inDate + ".roomId-" + roomId);
                        // 模拟点击
                        orderDom.click();
                    })
                },
                // 处理成开始日期-结束日期的格式
                seDateTran(v) {
                    if (this.timeThArr.length > 0) {
                        let sdate = this.timeThArr[0].date.substring(5, this.timeThArr[0].date.length)
                        let edate = this.timeThArr[this.timeThArr.length - 1].date.substring(5, this.timeThArr[this.timeThArr.length - 1].date.length)
                        sdate = sdate.replace("-", "/")
                        edate = edate.replace("-", "/")
                        return sdate + " - " + edate
                    }
                },
                // 更改日期
                dateChange(t) {
                    if (t == 2) {
                        this.dateVal = WebUtil.initTimeStr(new Date().getTime(), "day");
                    }
                    if (t == 3) {
                        let dates = WebUtil.getMonthList(this.timeThArr[0].date, 1)
                        this.dateVal = dates[0];
                    }
                    if (t == 4) {
                        let dates = this.timeThArr[this.timeThArr.length - 1].date
                        this.dateVal = dates;
                    }
                    // 移除框选遗留的元素dom
                    this.removeSeletedBox();
                    this.setTableConfig();
                }
            },
            mounted() {
                // 预处理基本数据信息
                this.setTableConfig();
                // 框选预订房间
                this.BoxSelection();
                // myPopper选项点击事件
                this.docToggle();

            }
        })
    </script>

</body>

</html>